<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6.3</title>

	</head>
	<style>
		.btn{
			diaplay: inline-block;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			color: #409eff;
			background: #ecf5ff;
			border-color: #b3d8ff;
			text-align: center;
			box-sizing: border-box;
			padding: 12px 20px;
			font-size: 14px;
			border-radius: 4px;
		}
	</style>
		<script src="js/vue.js"></script>
	<body>
		<div id="app">
			<counter inline-template>
				<button @click="num++">点击{{num}}</button>
			</counter>
			<counter inline-template>
				<span class="btn" @click="num++">计算{{num}}次</span>
			</counter>
		</div>
	</body>
	<script>
		Vue.component('counter',{
			data:function(){
				return {
					num:0
				}
			},
			template: '<button @click="num++">{{num}}次</button>'
		       })
		let vm = new Vue({
			el:'#app'
		})
	</script>
</html>